import Icon from "@ant-design/icons";
import type { GetProps } from "antd";
import { CSSProperties } from "react";

type CustomIconComponentProps = GetProps<typeof Icon> & {
  name: string;
  prefix?: string;
};

interface SvgComponent {
  name: string;
  width?: number | string;
  height?: number | string;
  prefix?: string;
  style?: CSSProperties;
  className?: string
}
function SvgComponent(props: SvgComponent) {
  let { name, prefix = "icon", width = "1em", height = "1em",className ,style} = props;
  width = typeof width === "number" ? width + "px" : width;
  height = typeof height === "number" ? height + "px" : height;
  const fill = style?.color || "currentColor"
  return (
    <svg aria-hidden="true" className={className} style={{ width, height,...style }}>
      <use href={`#${prefix}-${name}`} fill={fill} />
    </svg>
  );
}

export const SvgIcon = (props: CustomIconComponentProps) => {
  const { name, prefix, width, height, style, ...rest } = props;
  return <Icon component={() => SvgComponent({ name, prefix, width, height, style })} {...rest} />;
};
